<template>
	<a-card
		v-if="!isnormaluser && !isShowDetail"
		class="dongtai-container"
		title="报修动态"
		:tab-list="tabList"
		:active-tab-key="key"
		@tabChange="(key) => onTabChange(key)"
	>
		<template #extra>
			<a href="javascript:void(0);" @click="toBillSearch">查看更多>></a>
		</template>
		<a-list size="small" :data-source="data">
			<template #renderItem="{ item }">
				<a-list-item class="line">
					<span class="title">
						<a href="javascript:void(0);" @click="toDetail(item.rep_wo_id)">【 {{ item.rep_i_nameall }} 】{{ item.rep_wo_fault_description }}</a>
					</span>
					<span class="time">{{ item.rep_wo_insert_time }}</span>
				</a-list-item>
			</template>
		</a-list>
	</a-card>

	<a-card
		v-if="isnormaluser && !isShowDetail"
		class="dongtai-container"
		title="我的报修"
		:active-tab-key="key"
		@tabChange="(key) => onTabChange(key)"
	>
		<!-- <template #extra>
			<a-button type="text">查看更多>></a-button>
		</template> -->
		<a-list size="small" :data-source="data">
			<template #renderItem="{ item }">
				<a-list-item class="line">
					<span class="title">
						<a href="javascript:void(0);" @click="toDetail(item.rep_wo_id)">【 {{ item.rep_i_nameall }} 】{{ item.rep_wo_fault_description }}</a>
					</span>
					<span class="time">{{ item.rep_wo_insert_time }}</span>
				</a-list-item>
			</template>
		</a-list>
	</a-card>
	<RepairDetail v-if="isShowDetail" @goBack="goBack" :rep_wo_id="repWoId" />
</template>
<script setup>
	import { watch, ref, onMounted } from 'vue';
	import RepairDetail from '@/views/open-info/repair-detail.vue';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const key = ref('tab1');
	const isShowDetail = ref(false);
	const data = ref([]);
	const repWoId = ref('');

	const props = defineProps({
		dtdata: {
			type: Object,
			default: {},
		},
		isnormaluser: {
			type: Boolean,
			default: false,
		},
	});

	const tabList = [
		{
			key: 'tab1',
			tab: '我发起的',
		},
		{
			key: 'tab2',
			tab: '我处理的',
		},
	];
	const onTabChange = (value) => {
		key.value = value;
		if (value == 'tab1') {
			data.value = props.dtdata.data1;
		} else {
			data.value = props.dtdata.data2;
		}
	};
	const goBack = function () {
		isShowDetail.value = false;
	};
	const toDetail = function (rep_wo_id) {
		repWoId.value = rep_wo_id;
		isShowDetail.value = true;
	};
	const toBillSearch = function(){
		router.push({
			path: '/work/gdcx'
		});
	};
	onMounted(() => {
		data.value = props.dtdata.data1;
	});
	watch(
		() => props.dtdata,
		() => {
			onTabChange(key.value);
		}
	);
</script>
<style lang="less" scoped>
	.dongtai-container {
		width: 100%;
		.line {
			.title {
				font-size: 14px;
				color: #1d2129;
			}
			.time {
				font-size: 12px;
				color: #86909c;
			}
		}
	}
</style>
